<template>
<div>
  <el-drawer
  title="我是标题"
  :visible.sync="drawer"
  :with-header="false">
  <el-empty description="暂无内容"></el-empty>
</el-drawer>
<div class="header">
  <div class="headerLeft" @click="changeIsCollapse" >
    <img :src="logosrc" :width="asideWidth+'px'" >
  </div>
  <div class="headerRight">
    <el-badge value="new" class="item">
  <el-button size="small" plain @click="drawer=!drawer">消息</el-button>
</el-badge>
    <el-dropdown>
  <span class="el-dropdown-link">
    <img src="../../public/image/bg.jpg" >{{user}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="getUser">我的主页</el-dropdown-item>
    <el-dropdown-item  @click.native="loginOut" >退出登录</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
  </div>
</div>
<div class="container">

  <el-aside :width="asideWidth+'px'"  >
     <el-menu 
     :collapse="isCollapse"
     
     :default-active="activeIndex"
     class="el-menu-vertical-demo"
      text-color="#fff"
      active-text-color="#ffd04b"
      background-color="black"
      router
      >
       <el-submenu index="1" v-for="(item,index) in  menuList" :key="index" >
         <template slot="title">
            <i class="el-icon-menu"></i>
         <span>{{item.name}}</span>
         </template>
         <el-menu-item-group>
         <el-menu-item v-for="(citem,cindex) in  itemList"  
          :key="cindex" :index="citem.path" @mouseenter.native="changeBackground" >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{citem.name}}</span>
            </template>
         </el-menu-item>
        </el-menu-item-group>
       </el-submenu>
     </el-menu>
  </el-aside>
  <el-main><router-view></router-view></el-main>
</div>
</div>
</template>

<script>
import {mapState,mapMutations}  from 'vuex'
import logo from '../../public/image/logo.jpg'
import logo2 from '../../public/image/logo2.jpg'
export default {
  created() {
   
      document.title="智慧后台管理系统"
     this.isToken()
  },
  data() {
    return {
       drawer: false,
      asideWidth:300,
      isCollapse:false,
      logosrc:logo,
      menuList:[
        {name:'系统管理'},
        
      ],
      activeIndex:'/system/userManage',
      itemList:[
        {name:'用户管理',path:'/system/userManage'},
        {name:'字典维护',path:'/system/dictionary'},
        {name:'数据管理',path:'/system/dataManage'},
        {name:'日志审计',path:'/system/logAudit'}
      ]
    }
  },
  methods: {
       // 通过states获取操作对象
      ...mapMutations([
      'putUser'
    ]),
    // 验证登录token是否还在
    isToken(){
    if (!localStorage.getItem("loginToken")) {
      this.$router.push('/login')
      this.$message.warning("token过期请重新登录！")
      return
    }
    const token =localStorage.getItem("loginToken")
    const result=this.$jwtCode(token)
    this.putUser(result)
    
    },
    changeIsCollapse(){
      this.isCollapse=!this.isCollapse
      this.asideWidth=this.isCollapse?60:300
      this.logosrc=this.isCollapse?logo2:logo
    },
    loginOut(){
      localStorage.removeItem("loginToken")
      this.$router.push('/login')
    },
    changeBackground(e){
      e.target.style.backgroundColor="#409EFF"
    },
    getUser(){
      this.$router.push('/user')
    }
  },
    computed:{
    ...mapState([
      'user',
      'password',
      'time'
    ])
  },
}
</script>

<style lang="less" >
.header{
  display: flex;
  justify-content: space-between;
  align-content: center;
  .headerLeft{
  
    img{
      
      height: 100%;
    }
  }
  .headerRight{
    margin-right: 30px;
    display: flex;
    align-items: center;
   .el-badge{
     margin-right: 50px;
   }
   .el-dropdown-link{
     display: flex;
     align-items: center;
    img{
      margin-right: 10px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    }
  }
}

.container{
  display: flex;
  justify-content: space-between;
  .el-aside{
    height: 93vh;
    background: black;
    .el-menu {
      border-right: 1px solid;
 .el-submenu__title:hover {
  background-color: #409EFF !important;
}

    .el-menu-item:hover{  
  outline: 0 !important;  

   background: #409EFF !important;  
}  

    }
  }
  .el-main{
    background:  #E9EEF3;
  }
}


</style>